<template>
    <div class="h-full w-full flex flex-col">
        <div>
            <el-descriptions v-if="route.query" :column="2" border>
                <el-descriptions-item label="订单号">{{ route.query.orderNumber }}</el-descriptions-item>
            </el-descriptions>
        </div>
        <div class="flex-1">
            <el-table :data="orderInfo" border style="height: 100%; width: 100%;">
                <el-table-column prop="jewelryName" label="名称" />
                <el-table-column prop="abrade" label="磨损" />
                <el-table-column prop="maxToBuyPrice" label="最高求购价" />
                <el-table-column prop="mortgagePrice" label="抵押价格" />
                <el-table-column prop="mortgageRatio" label="抵押比例" />
                <el-table-column prop="templateId" label="模板ID" />
                <el-table-column prop="typeId" label="类型ID" />
                <el-table-column prop="typeName" label="类型名称" />
                <el-table-column prop="userId" label="用户ID" />
            </el-table>
        </div>
    </div>
</template>


<script setup lang="ts">
import { getOrderInfo } from '@/api/order';
import type { OrderInfoData } from '@/types/order';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router'
const orderInfo = ref<OrderInfoData>()
const route = useRoute()

const getOrderInfoApi = async () => {
    const res = await getOrderInfo(route.query)
    orderInfo.value = res.data
    console.log(orderInfo.value);

}

onMounted(() => {
    getOrderInfoApi()
})
</script>
